<template>
	<view>
		<template>
			<view class="vip-header">
				<custom title="会员中心" background="rgba(0,0,0,0)" titleColor="#FFFFFF" backColor="#FFFFFF">
					<!-- 充值记录 -->
					<view @tap.stop="toPage('/pages/user/vip-list','',true)" slot="right" class="color-ffffff fs-24"
						style="transform: translateX(-50rpx);">
						充值记录
					</view>
					<!-- 充值记录 -->
				</custom>
				<view class="bgmineicon"></view>
				<!-- <scroll-view @touchstart="swiperScrollTouchStart" @ scroll-x="true" style="margin-top: 40rpx;"
					@scroll="swiperScroll" :scroll-into-view="swiper_id" :scroll-with-animation="true">
					<view style="width: auto;white-space: nowrap;">
						<view class="swiper-item-vip" id="scroll-vip" v-if="swiper_index == 0">
							<view
								style="height: 100%;background: url(../../static/vip/vip.png) left top / 100% 100% no-repeat;padding-left: 44rpx;padding-top: 50rpx;">
								<view class="flex flex-y-center">
									<image src="../../static/my/vip-icon.png" style="width: 80rpx;height: 52rpx;">
									</image>
									<view class="ml-20">
										<view class="bold fs-40"
											style="line-height: 44rpx;color: #6E89CD;font-style: italic;">
											发个信 VIP
										</view>
										<view class="mt-10 color-999999 fs-26">
											{{user_info.vipEndTime >= vipNowTime ? '您已是VIP 尊享超多权益':'开启VIP尊享超多权益'}}
										</view>
									</view>
								</view>
								<view class="color-999999 fs-24" style="margin-top: 66rpx;">
									{{user_info.vipEndTime >= vipNowTime ? get_end_time(user_info.vipEndTime):'未开通VIP会员'}}

								</view>

							</view>
						</view>
						<view class="swiper-item-vip " id="scroll-svip" v-if="swiper_index == 1">
							<view
								style="height: 100%;background: url(../../static/vip/svip.png) left top / 100% 100% no-repeat;padding-left: 44rpx;padding-top: 50rpx;">

								<view class="flex flex-y-center">
									<image src="../../static/my/svip-icon.png" style="width: 80rpx;height: 52rpx;">
									</image>
									<view class="ml-20">
										<view class="bold fs-40"
											style="line-height: 44rpx;color: #FFDBAE;font-style: italic;">
											发个信 SVIP
										</view>
										<view class="mt-10  fs-26" style="color: #A58F74;">

											{{user_info.svipEndTime >= vipNowTime ? '您已是SVIP 尊享进阶权益':'开启SVIP尊享进阶权益'}}
										</view>
									</view>
								</view>

								<view class=" fs-24" style="margin-top: 66rpx;color: #A58F74;">
									{{user_info.svipEndTime >= vipNowTime ? get_end_time(user_info.svipEndTime):'未开通SVIP会员'}}

								</view>
							</view>
						</view>
						<view class="swiper-item-vip " id="scroll-pvip" v-if="swiper_index == 2">
							<view
								style="height: 100%;background: url(../../static/vip/svip.png) left top / 100% 100% no-repeat;padding-left: 44rpx;padding-top: 50rpx;">
								<view class="flex flex-y-center">
									<image src="../../static/my/svip-icon.png" style="width: 80rpx;height: 52rpx;">
									</image>
									<view class="ml-20">
										<view class="bold fs-40"
											style="line-height: 44rpx;color: #FFDBAE;font-style: italic;">
											超级合伙人
										</view>
										<view class="mt-10  fs-26" style="color: #A58F74;">

											{{user_info.partnerEndTime >= vipNowTime ? '您已是超级合伙人尊享进阶权益':'开启超级合伙人尊享进阶权益'}}
										</view>
									</view>
								</view>
								<view class=" fs-24" style="margin-top: 66rpx;color: #A58F74;">
									{{user_info.partnerEndTime >= vipNowTime ? get_end_time(user_info.partnerEndTime):'未开通超级合伙人'}}
								</view>
							</view>
						</view>
						<view style="width: 26rpx;display: inline-block;"></view>
					</view>
				</scroll-view> -->
				<view style="margin-top: 60rpx;" class="flex flex-y-center pl-30 pr-30">
					<view
						style="width: 120rpx;height: 120rpx;border-radius: 50%;background-color: #FFFFFF;overflow: hidden;">
						<qq-image :url="user_info.avatarUrl" style="width: 100%;height: 100%;"></qq-image>
					</view>


					<view class="flex-1 over-line1 pl-30">
						<view class="flex flex-y-center">
							<view class="fs-36 color-333333 bold" style="line-height: 34rpx;">{{user_info.name}}</view>
							<view v-if="!user_info.vipEndTime && !user_info.svipEndTime && !user_info.partnerEndTime"
								class="buy-btn-svip"
								style="font-size: 20rpx;background: linear-gradient(45deg, #D2E4F4, #fff);color: #333;">
								未开通</view>
							<view v-if="user_info.vipEndTime && tabsIndex == 0" class="buy-btn-svip">VIP</view>
							<view v-if="user_info.svipEndTime && tabsIndex == 1" class="buy-btn-svip"
								style="background: linear-gradient(45deg, #ADBBD4, #D2E4F4);">SVIP</view>
							<view v-if="user_info.partnerEndTime && tabsIndex == 2" class="buy-btn-svip"
								style="font-size: 20rpx;background: linear-gradient(45deg, #7AB9FF, #6B5EFF);">合伙人
							</view>
						</view>
						<view v-if="tabsIndex == 0" class="fs-26 color-333333 mt-10 over-line1">
							{{user_info.vipEndTime >= vipNowTime ? get_end_time(user_info.vipEndTime):'未开通VIP会员'}}
						</view>
						<view v-if="tabsIndex == 1" class="fs-26 color-333333 mt-10 over-line1">
							{{user_info.svipEndTime >= vipNowTime ? get_end_time(user_info.svipEndTime):'未开通SVIP会员'}}
						</view>
						<view v-if="tabsIndex == 2" class="fs-26 color-333333 mt-10 over-line1">
							{{user_info.partnerEndTime >= vipNowTime ? get_end_time(user_info.partnerEndTime):'未加入合伙人'}}
						</view>
					</view>
				</view>
				<view style="height: 80rpx;"></view>
			</view>

			<view class="vip-content" v-if="vip.length>0">
				<viptabs :list="viptabslist" :scroll="true" @change="tabsChange">
				</viptabs>
				<view style="padding: 30rpx 30rpx;background: #fff;height: 55vh;overflow-y: auto;">
					<view class="tit_box">
						会员专属权益
					</view>
					<view class="flex flex-wrap" style="margin-top: 37rpx;">
						<view class="my-item-box" v-for="(item,index) in itemArr" :key="index">
							<view class="my-item-image-box">
								<image :src="item.src"></image>
							</view>
							<view class="my-item-text">{{item.name}}</view>
						</view>
					</view>
					<view class="tit_box">
						权益说明
					</view>
					<view v-if="tabsIndex == 0" class="tabsIndex_box">
						<view>可建群聊上限：500群</view>
						<view>可加入群聊上限：1000群</view>
						<view>群聊人数上限：1000人</view>
						<view>添加好友上限：2000人</view>
					</view>
					<view v-if="tabsIndex == 1" class="tabsIndex_box">
						<view>可建群聊上限：1000群</view>
						<view>可加入群聊上限：1000群</view>
						<view>群聊人数上限：2000人</view>
						<view>添加好友上限：3000人</view>
					</view>
					<view v-if="tabsIndex == 2" class="tabsIndex_box">
						<view>可建群聊上限：1000群</view>
						<view>可加入群聊上限：1000群</view>
						<view>群聊人数上限：2000人</view>
						<view>添加好友上限：3000人</view>
					</view>



					<view class="tit_box">
						选择会员套餐
					</view>
					<view>
						<swiper class="swiperBox" :previous-margin="swiper.margin" :next-margin='swiper.margin'
							:circular="true" @change="partSwiperChange" :current='tabsIndex'>
							<swiper-item @touchmove="touchmove(index)" class="swiperItem"
								v-for="(spitem,index) in cardSwiperlist" :key="index">
								<view :class="['swiperWrap', tabsIndex === index?'swiperWrapactive ':'']">
									<view class="sp_text2">
										{{spitem.text2}}
									</view>
									<view class="bold fs-40" style="text-align: center;">{{spitem.name}}
									</view>
									<view class="bold fs-40" style="color: #E5214E;text-align: center;">￥{{spitem.amt}}
									</view>
									<view class="sp_text">
										{{spitem.text}}
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="dqwx">
						到期未续费用户，不享受对应权限，未续费，默认该用户为免费注册用户，续费后恢复其相关权限
					</view>
				</view>
			</view>

			<view class="agreement flex flex-x-y">
				<view class="iconfont icon-weixuanzhong" style="font-size: 26rpx;" v-if="value != 1"
					@tap="choose_value(1)"></view>
				<view class="iconfont icon-xuanzhong" style="font-size: 26rpx;" v-else @tap="choose_value(0)">
				</view>
				<view class="agreementview flex flex-x-y" style="margin-left: 4rpx;color: #9d9dc8;">
					<text>阅读并同意确认</text>
					<text style="color: #0A0976;" class="bold"
						@tap="openLocalUrl('https://app.fagexin.online/vipprivacy.html','会员服务协议')">《付费会员服务协议》</text>
				</view>
			</view>

			<view class="footer flex flex-y-c" v-if="vip.length>0" @tap="toPay">
				<view class="right flex flex-x-y">
					<text v-if="tabsIndex == 0">
						{{user_info.vipEndTime >= vipNowTime ? '立即续费':'立即开通'}}
					</text>
					<text v-if="tabsIndex == 1">
						{{user_info.svipEndTime >= vipNowTime ? '立即续费':'立即开通'}}
					</text>
					<text v-if="tabsIndex == 2">
						{{user_info.partnerEndTime >= vipNowTime ? '已开通':'立即开通'}}
					</text>
				</view>
			</view>
			<!-- <uni-popup ref="popup" type="bottom">
				<view class="dialog">
					<view class="title fs-36">
						选择支付方式
					</view>
					<view class="flex flex-x-b flex-y-c mb-20">
						<view class="zhifubao flex-y-center">
							<text class="fs-30 iconfont icon-zhifu-zhifubao ml-16"></text>
							<text class="fs-30 ml-20 ">支付宝</text>
						</view>
						<view class="iconfont icon-xuanzhong"></view>
					</view>
					<view class="btn" @tap="toPay">
						立即支付
					</view>
				</view>
			</uni-popup> -->
			<paylist ref="payList"></paylist>
		</template>
	</view>
</template>

<script>
	import vipApi from './api/vip'
	import {
		Swiper,
		SwiperSlide
	} from 'vue-awesome-swiper'

	import {
		payByliveId
	} from '@/utils/pay.js';
	export default {
		components: {
			Swiper,
			SwiperSlide
		},
		data() {
			return {
				swiper: {
					margin: "200rpx",
					index: 0,
				},

				cardSwiperlist: [{
					name: '月费VIP',
					amt: '29.9',
					text: '仅限当月使用',
					text2: '1个月',
				}, {
					name: '年费SVIP',
					amt: '199',
					text: '包年服务',
					text2: '全年',
				}, {
					name: '超级合伙人',
					amt: '688',
					text: '包年服务',
					text2: '全年',
				}],
				itemArr: [{
						name: '佣金收益',
						src: '../../static/my/yj_1.png',
					},
					{
						name: '群聊权益',
						src: '../../static/my/ql.png'
					},
					{
						name: '随意加好友',
						src: '../../static/my/hy.png'
					},
					{
						name: '合伙人权益',
						src: '../../static/my/hhr.png'
					}
				],
				swiperOption: {
					loop: false,
					autoplay: {
						delay: 2000,
						stopOnLastSlide: false,
						disableOnInteraction: true
					},
					effect: 'coverflow',
					slidesPerView: 3,
					centeredSlides: true,
					slideToClickedSlide: true,
				},
				value: 0 + '',
				vip: [],
				viptabslist: [{
					name: 'VIP',
					urlicon: '../../static/my/vip-icon.png'
				}, {
					name: 'SVIP',
					urlicon: '../../static/my/svip-icon.png'
				}, {
					name: '合伙人',
					urlicon: '../../static/my/pvip-icon.png'
				}],
				powers: [
					//
					{
						url: '../../static/vip/s1.png',
						name: '好友上限',
						text: ['', ''],
						unit: '人',
					},
					{
						url: '../../static/vip/s2.png',
						name: '群成员上限',
						text: ['', ''],
						unit: '人',
					},
					{
						url: '../../static/vip/s3.png',
						name: '创建群聊',
						text: ['', ''],
						unit: '个',
					},
					// {
					// 	url: '../../static/vip/s4.png',
					// 	name: '自动进新群',
					// 	text: ['群满', '群满'],
					// },
					// {
					// 	url: '../../static/vip/s5.png',
					// 	name: '同时转发',
					// 	text: ['20条', '20条'],
					// },
					// {
					// 	url: '../../static/vip/s6.png',
					// 	name: '会员标识',
					// 	text: ['展示', '展示'],
					// },
				],
				vipNowTime: 1000,
				scrollTop: 0, //左滑的位置
				scrollItemWidth: 0,
				swiper_id: '',
				type: '',
				tabsIndex: 0, //tab切换
			}
		},
		computed: {
			// swiper_index() {
			// 	if (this.type == 'vip') {
			// 		return 0;
			// 	}
			// 	if (this.type == 'svip') {
			// 		return 1;
			// 	}
			// 	if (this.type == 'partner') {
			// 		return 2;
			// 	}
			// }
		},
		onLoad(e) {
			this.scrollItemWidth = uni.upx2px(300);
			this.is_ios_copy = this.is_ios;
			// this.is_ios_copy = false;

			if (e.type && e.type == 'svip') {

				this.scrollTop = 400;
				this.show_svip = true;
			}
			if (e.type == 'partner') {
				this.scrollTop = 400;
				this.show_svip = true;
			}
			this.type = e.type
			if (this.type == 'vip') {
				this.tabsIndex = 0
			}
			if (this.type == 'svip') {
				this.tabsIndex = 1
			}
			if (this.type == 'partner') {
				this.tabsIndex = 2
			}
			this.$nextTick(() => {
				this.tabsChange(this.tabsIndex);
			});
		},
		onShow() {
			this.vipNowTime = new Date().getTime();
			this.getInfo();
		},
		methods: {
			touchmove(index) {
				this.tabsIndex = index

				this.$nextTick(() => {
					this.tabsChange(this.tabsIndex);
				});
			},
			partSwiperChange(event) {
				this.tabsIndex = event.detail.current
				this.$nextTick(() => {
					this.tabsChange(this.tabsIndex);
				});
			},
			enter() {
				this.mySwiper.autoplay.stop()
			},
			leave() {
				this.mySwiper.autoplay.start()
			},

			tabsChange(i) {
				this.tabsIndex = i

			},
			choose_value(val) {
				this.value = val;
			},
			async toPay() {
				if (this.value == 0) {
					this.showToast('请阅读并勾选会员服务协议');
					return;
				}
				//选择支付方式
				this.$refs.payList.open({
					price: !this.is_ios_copy ? this.vip[this.tabsIndex].amt : this.vip[this.tabsIndex]
						.appleAmt,
					success: (id, price, detail) => {
						/////////
						
						this.less(() => {
							payByliveId({
								id: this.vip[this.tabsIndex].id,
								pay: detail,
								price: price,
								vipType: !this.is_ios_copy ? '' : 'apple',
								success: (res) => {
									this.showToast('支付成功！')
									// this.close()
									this.getInfo()
									this.$store.dispatch('refresh_user');
								},
								fail: (error) => {
									console.error('支付失败：', error);
									this.showToast('支付失败！')
									// this.close()
								}
							}, 'vip');
						});
						
						
						
						
						
						
						
						
						
						
						
						// this.less(() => {
						// 	payByliveId({
						// 		id: this.vip[this.tabsIndex].id,
						// 		pay: detail,
						// 		price: price,
						// 		vipType: !this.is_ios_copy ? '' : 'apple',
						// 		success: () => {
						// 			this.showToast('支付成功！')
						// 			// this.close()
						// 			this.getInfo()
						// 			this.$store.dispatch('refresh_user');
						// 		},
						// 		fail: (error) => {
						// 			console.error('支付失败：', error);
						// 			this.showToast('支付失败！')
						// 			// this.close()
						// 		}
						// 	}, 'vip');
						// });
						////////
					}
				});
				//选择支付方式
				return;


				const {
					status,
					data
				} = await vipApi.buyVip({
					id: this.vip[this.tabsIndex].id
				})
				if (status === 200) {
					console.log('获取vip信息',data)
					this.placeOrder(data.id)
				}

			},
			async placeOrder(orderId) {
				const {
					data,
					status
				} = await vipApi.placeOrder({
					orderId
				})
				if (status !== 200) return
				console.log('vip信息',data)
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data,
					success: () => {
						this.showToast('支付成功！')
						// this.close()
						this.getInfo()
						this.$store.dispatch('refresh_user');
					},
					fail: (error) => {
						console.error('支付失败：', error);
						this.showToast('支付失败！')
						// this.close()
					},
				})
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			async getInfo() {
				let {
					data
				} = await vipApi.getVipInfo()
				data = this.clone(data).filter(val => val.amt);
				data = data.sort((v1, v2) => {
					return v1.level > v2.level ? 1 : -1;
				});
				data.forEach((val, index) => {
					this.powers[0].text[index] = val.friendMax;
					this.powers[1].text[index] = val.groupPeopleMax;
					this.powers[2].text[index] = val.groupMax;
				});
				this.vip = data;
				if (this.show_svip) {
					this.$nextTick(() => {
						this.swiper_id = 'scroll-svip';
						this.show_svip = false;
					});
				}



			},
			swiper_change(e) {
				this.tabsIndex = e.detail.current;
			},
			get_end_time(times) {
				return `会员将在 ${this.dateFormat('YY-mm-dd',new Date(times))}到期`;
			},
			swiperScroll(e) {
				this.scrollTop = e.detail.scrollLeft;
				clearTimeout(this.scrollTimer);
				this.scrollTimer = setTimeout(() => {
					this.swiperScrollTouchEnd();
				}, 100);
			},

			swiperScrollTouchStart() {
				clearTimeout(this.scrollTimer);
			},
			swiperScrollTouchEnd() {
				this.swiper_id = '';
				this.$nextTick(() => {


					if (this.tabsIndex == 0) {
						this.swiper_id = 'scroll-vip';
					}
					if (this.tabsIndex == 1) {
						this.swiper_id = 'scroll-svip';
					}
					if (this.tabsIndex == 2) {
						this.swiper_id = 'scroll-pvip';
					}

				});
				// console.log('this.swiper_id', this.swiper_id);
			},
		}
	}
</script>

<style lang="scss">
	.swiperBox {
		height: 360rpx;
		overflow: hidden;
	}

	.swiperItem {
		border-radius: 20rpx;
		overflow: hidden;
	}

	.swiperWrap {
		height: 360rpx;
		transform: scale(0.9);
		transition: transform 0.3s ease-in-out 0s;
		position: relative;
		padding-top: 20rpx;
		line-height: 100rpx;
		background: linear-gradient(180deg, #E5EBFF 0%, #FEFEFF 100%);
		border-radius: 20rpx;
	}

	.swiperWrapactive {
		border: 2px solid #4269FA;
	}

	.sp_text {
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 10px 10px 10px 10px;
		font-weight: 400;
		font-size: 26rpx;
		color: #0A0976;
		text-align: center;
		margin: 0 20rpx;
		line-height: 65rpx;
	}

	.sp_text2 {
		line-height: 60rpx;
		text-align: center;
		position: absolute;
		top: -20rpx;
		left: -20rpx;
		border-radius: 10px 0px 10px 0px;
		width: 100rpx;
		color: #814C0C;
		height: 50rpx;
		background: linear-gradient(90deg, #FAB65A 0%, #FFE9C2 100%);
	}






	@import "swiper/css/swiper.css";

	page {
		background: $pageColor;
		font-size: 28rpx;
	}

	.dqwx {
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		font-weight: 300;
		margin-top: 15rpx;
		font-size: 22rpx;
		color: #999999;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}


	.my-item-box {
		width: 25%;
		display: flex;
		flex-flow: column nowrap;
		margin-bottom: 46rpx;
		justify-content: center;
		align-items: center;

		.my-item-image-box {
			width: 80rpx;
			height: 80rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.my-item-text {
			font-size: 26rpx;
			color: #666666;
			line-height: 28rpx;
			margin-top: 20rpx;
		}

	}

	.tit_box {
		margin-bottom: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		font-style: normal;
		text-transform: none;
	}


	.tabsIndex_box {
		line-height: 45rpx;
		height: 430rpx;
		padding: 140rpx 135rpx;
		background: url(../../static/vip/tabsIndex_box.png) left top / 100% 100% no-repeat;
		margin: 0 45rpx;
		z-index: 9999;
		color: #2B2F5F;
	}


	.buy-btn-svip {
		width: 100rpx;
		margin-left: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		color: #fff;
		background: linear-gradient(45deg, #0177FB, #01E2FB);

	}

	.agreement {
		display: flex;
		align-items: center;
		justify-content: left;
		margin-left: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;

		image {
			width: 26rpx;
			height: 26rpx;
			background: #ffffff;
			margin-right: 8rpx;
		}

		.agreementview {
			font-size: 26rpx;
			font-weight: 400;
			text-align: center;
			color: #888888;
			line-height: 36rpx;

			.color {
				color: #ebd448;
			}
		}

	}

	.vip-header {
		background: url(../../static/vip/box.png) left top / 100% 100% no-repeat;
		height: 800rpx;
		position: relative;
		z-index: 2;
	}

	.bgmineicon {
		position: fixed;
		top: 180rpx;
		right: 50rpx;
		width: 150rpx;
		height: 150rpx;
		background: url(../../static/my/vipbg-icon.png) center center no-repeat;
		background-size: 150rpx;
	}

	.vip-content {
		position: relative;
		z-index: 10;
		overflow: hidden;
		// background-color: #fff;
		background-color: $pageColor;
		border-radius: 30rpx;
		margin-top: -420rpx;
	}

	.swiper-item-vip {
		width: 750rpx;
		height: 280rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: inline-block;
	}

	.v-line-vip {
		width: 8rpx;
		height: 28rpx;
		background: linear-gradient(0deg, #F09675 0%, #FEE2DB 100%);
		border-radius: 4rpx;
	}

	.vip-power-box {
		width: 204rpx;
		border-radius: 10rpx;
		height: 128rpx;
		background: linear-gradient(-57deg, #FCEDE4 0%, #FDF7F5 100%);
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		margin-top: 20rpx;
		margin-right: 20rpx;

		&:nth-of-type(3n) {
			margin-right: 0;
		}

		image {
			width: 46rpx;
			height: 46rpx;
			margin-left: 19rpx;
			margin-right: 14rpx;
		}
	}

	.vip-power-text>view:nth-of-type(1) {
		font-size: 30rpx;
		color: #551300;
	}

	.vip-power-text>view:nth-of-type(2) {
		font-size: 22rpx;
		color: #B3907D;
	}

	.footer {
		z-index: 999;
		margin: 0 30rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(270deg, #3045FD 4%, #718EFB 100%);
		box-shadow: 0px 4px 21px 0px rgba(59, 81, 253, 0.52);
		border-radius: 20px 20px 20px 20px;
		position: fixed;
		left: 0;
		bottom: 60rpx;
		color: #FFFFFF;
		font-size: 28rpx;

		.right {
			margin: auto;
		}
	}


	.dialog {
		width: 100%;
		background: #fff;
		height: 330rpx;

		.title {
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
			padding: 5rpx 0;
		}

		.iconfont {
			font-size: 40rpx;
			color: #F4944E;
			vertical-align: middle;
			margin-right: 20rpx;
		}

		.zhifubao {
			height: 100rpx;
			line-height: 100rpx;

			.iconfont {
				font-size: 60rpx;
				color: #009FE8;
				vertical-align: middle;
			}
		}

		.btn {
			height: 80rpx;
			width: 600rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			background: #F4944E;
			margin: 0 auto;
			border-radius: 80rpx;
		}

	}
</style>